<template>
	<m-layout title="分类详情" class="classify box " :isShow="false" gap="0">
		<view class="flex-between" slot="header" >
			<m-icon   wh="38" :color="color" type="icon-fanhui" spa="0 0 0 20" @click="Jump()"></m-icon>
			<m-search  v-model="key" placeholderText='请输入商品名称' :leftShow="false" lIconColor="#111" class="header flex-1"
				:isJump='false' @onClear="onReset"  @goSearch="onReset" />
		</view>
		
		<view class="content">
			<view class="left">
				<silder :idx="isIdx">
					<template v-for="(item,idx) in classifyList">
						<text :class="{active:item.id==isIdx}" @click="setIdx(item)">{{item.tname}}</text>
					</template>
				</silder>
			</view>
			<view class="right flex flex-column">
				<m-image class="banner-img" wh="516 170" :src="tabItem.picurl" v-if="tabItem.picurl" />
				<m-block style="width: 100%;" gap="0 10 20 10" radius="10" spa="0 0 20 0 ">
					<m-tabs class="m-tabs" v-model="isWards" lineHeight="5rpx" height="60rpx" :tabs="['全部商品','拼团商品']"
						color="#333" pillsColor="var(--theme)" lineColor="var(--theme)" pillsBorderRadius="26rpx"
						@change="onReset" />
					<m-line spa="10 0 10 0"></m-line>
					<view class="flex-between">
						<m-text>精选商品</m-text>
						<view class="flex">
							<view @click="sortPrice = sortPrice == 1 ? 2 : 1">
								<m-text :color=" [1, 2].indexOf(sortPrice) != -1? 'var(--theme)':'#333'">价格</m-text>
								<template v-if="[1, 2].indexOf(sortPrice) == -1">
									<m-icon spa="0 0 0 10" wh="28 22" type="sort10" />
								</template>
								<template v-else>
									<m-icon spa="0 0 0 10" wh="28 22" :type="sortPrice == 1 ? 'sort11' : 'sort12'" />
								</template>
							</view>
							<view :class="{ active: sortPrice == 5 }" @click="sortPrice = 5"
								style="margin-left: 20rpx;">
								<m-text :color="sortPrice == 5?'var(--theme)':'#333'">销量</m-text>
								<template v-if="sortPrice == 5"></template>
							</view>
						</view>
					</view>
				</m-block>
				<view class="card-main flex-1">
					<scroll-view :scroll-top="scrollTop" @scrolltolower="getData" class="scroll-view" scroll-y="true">
						<template v-for="item in listArr">
							<m-block class="flex-between" gap="15 17" spa="0 0 20"
								@click="Jump('/pagesA/shopping/goodsdetail/goodsdetail?id=' + item.gid)">
								<m-image :src="item.info.picurls" wh="140" spa="0 10 0 0" />
								<view class="flex-1 card-right" style="overflow: hidden;">
									<m-text block class="otw">{{item.info.goodsName}}{{item.info.goodsName}}</m-text>
									<m-text block spa="15 0" color="#999">已售：{{item.info.totalSell}}</m-text>
									<view class="flex">
										<m-number cny :value="item.info.price" color="var(--theme)"
											size="38 26"></m-number>
									</view>
								</view>
							</m-block>
						</template>
						<m-loading :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
					</scroll-view>
				</view>
			</view>
		</view>
	</m-layout>
</template>

<!--
  scrollTo.behavior  表示滚动行为
  smooth (平滑滚动)，instant (瞬间滚动)，默认值 auto，效果等同于 instant
 -->
<script>
	import { mapState } from 'vuex'
	import { GetGoodsPage } from '@/api/Goods.js';
	import silder from './components/silder.vue'
	export default {
		components: { silder },
		data() {
			return {
				isWards: 0,
				sortPrice: 0,
				scrollTop: 0,
				isIdx: 0,
				pid: 0,
				picurl: '',
				key: '',
				tabItem: {},

				listArr: [],
				pageSize: 10,
				pageIndex: 1,
				pageCount: 1,
				isLoading: false
			}
		},
		onLoad({tabid}) {
			this.tabItem = this.classifyList[tabid || 0]
			this.isIdx = this.tabItem['id']
		},
		watch: {
			//切换分类
			isIdx() {
				this.isWards = 0
				this.onReset();
			},
			sortPrice() {
				this.onReset();
			},
		},
		computed: {
			...mapState({
				classifyList: state => state.goods.classifyList,
			}),
		},
		methods: {
			setIdx(item) {
				this.tabItem = item
				this.isIdx = item.id
			},
			onReset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.listArr = [];
				this.getData();
			},
			//点击banner时
			handleBanner(item) {
				let reg = new RegExp('http')
				if (item.redirectionUrl) {
					if (reg.test(item.redirectionUrl)) {
						window.open(item.redirectionUrl)
					} else {
						this.Jump(item.redirectionUrl)
					}
				}
			},
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return;
				}
				this.isLoading = true;
				const { success, list, pageCount } = await GetGoodsPage({
					key: this.key, // 分类id
					tid: this.isIdx, // 分类id
					sort: this.sortPrice,
					wards: this.isWards ? 3 : '',
					pageIndex: this.pageIndex
				});
				this.isLoading = false;
				this.pageCount = pageCount;

				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
			},
		},
	};
</script>
<style lang='scss' scoped>
	.classify {
		/deep/ .layout-content {
			height: calc(100% - var(--window-bottom) - 16rpx);
			padding-bottom: var(--window-bottom) !important;
			box-sizing: border-box;
		}
	}

	.header {
		/deep/ .search-Item {
			background: #F5F5F5;
		}
	}

	.box {
		height: 100vh;

		.content {
			width: 100%;
			height: 100%;
			overflow: hidden;
			display: grid;
			grid-template-columns: 180rpx 1fr;
			grid-gap: 20rpx;
		}

		.left {
			grid-template-columns: repeat(2, 1fr);
			width: 180rpx;
			background: #fff;

			text {
				position: relative;
				display: block;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100rpx;
				text-align: center;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999;

				&::after {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 0rpx;
					border-radius: 3rpx;
					transition: all .15s;
				}
			}

			.active {
				background: #FFFFFF;
				font-weight: bold;
				color: var(--theme);

				&::after {
					height: 42rpx;
					background: var(--theme);
				}
			}
		}

		.right {
			background: #f6f6f6;
			overflow: hidden;
			padding-right: 20rpx;

			.card-main {
				width: 100%;
				height: 100%;
				overflow: hidden;

				.card-right {
					width: 100%;
					overflow: hidden;
					height: 140rpx;
				}
			}


			/deep/ .scroll-view {
				height: 100%;
			}

			.swiper {
				height: 180rpx;

				/deep/.uni-swiper-wrapper {
					overflow: hidden;
				}

				.swiper-item {
					height: 180rpx;

					.banner-img {
						width: 100%;
						height: 180rpx;
					}
				}

				/deep/ {
					.uni-swiper-dot {
						width: 10rpx;
						height: 10rpx;
						background: #f6f6f6 !important;
						border-radius: 5rpx;

						&.uni-swiper-dot-active {
							width: 20rpx;
						}
					}
				}
			}

		}
	}
</style>